import { HsAdminInput } from '@hs-admin/base-components'

import RelationList from './components/RelationList'

import { memo, useRef, useState } from 'react'

import Search from './components/Search'

import { Button, Modal } from 'antd'

const Database = () => {
  const [searchValue, setsearchValue]: any = useState({
    release_item_id: '',
    keywords: null,
    filters: {
      keywords: '',
      items: []
    },
    relation: null,
    ids: null,
    sort: null
  })

  //关联查询的筛选条件
  const [relationsearchValue, setrelationsearchValue]: any = useState({
    release_item_id: '',
    keywords: null,
    filters: {
      keywords: '',
      items: []
    },
    relation: null,
    ids: null
  })

  const RelationListRef = useRef<any>(null)

  const [Inputsearch, setInputsearch] = useState('')

  const [hasInit, sethasInit] = useState(false)

  //关联查询弹框
  const [isModalOpen, setIsModalOpen] = useState(false)

  const [sorterIt, setsorterIt] = useState(null) //列表排序

  //关联数据的item
  const relation_item = (item: any) => {
    setIsModalOpen(true)
    setrelationsearchValue({
      filters: [],
      release_item_id: item.id,
      ids: null,
      keywords: '',
      page: 1,
      page_size: 20,
      relation: {
        relation_id: item?.relation_id,
        field: item?.field,
        data_ids: item?.data_ids
      },
      sort: sorterIt ?? null
    })
  }

  const sorter = (e: any, type: string) => {
    setsorterIt(e)
    if (type === 'association') {
      setrelationsearchValue((prev: any) => {
        return {
          ...prev,
          sort: e
        }
      })
    } else {
      setsearchValue((prev: any) => {
        return {
          ...prev,
          sort: e
        }
      })
    }
  }

  const handleSelectItem = (e: any, Databasekeywords: any) => {
    const params: any = {
      release_item_id: e.release_item_id,
      keywords: Databasekeywords ?? Inputsearch,
      filters: {
        keywords: '',
        items: []
      }
    }
    if (e.relation) {
      params.relation = {
        relation_id: e.relation?.relation_id,
        field: e.relation?.field,
        data_ids: e.relation?.data_ids
      }
    }

    Object.keys(e.filters).forEach((key) => params.filters.items.push(...e.filters[key]))

    setsearchValue((prev: any) => {
      return {
        ...prev,
        filters: params.filters,
        keywords: params.keywords,
        release_item_id: params.release_item_id,
        relation: params.relation,
        sort: sorterIt ?? null
      }
    })

    RelationListRef.current.resizeTo()

    if (Databasekeywords) setInputsearch(Databasekeywords)

    sethasInit(true)
  }

  //表切换清空数据
  const CancelData = () => {
    setsorterIt(null)
    RelationListRef.current.clearsetselectedRowKeys()
  }

  //关闭关联查询弹框 并刷新导出数量统计
  const onCancel = () => {
    setIsModalOpen(false)
    RelationListRef.current.resizeExport_counts()
  }

  //点击左边搜索按钮将页码置为初始值并请求列表
  const getbaseDataList = () => {
    RelationListRef.current.getList()
    RelationListRef.current.resizeTo()
  }

  return (
    <div className="bg-white h-100%">
      {/* body */}
      <div className="flex h-90% w-100%">
        {/* left */}
        <div>
          <div className="flex items-center  h-10%">
            {/* input search-btn */}
            <div className="flex items-center">
              <HsAdminInput
                value={Inputsearch}
                placeholder="请输入"
                onChange={(e: { target: { value: any } }) => setInputsearch(e.target.value)}
                onPressEnter={getbaseDataList}
              />
              <Button className="ml-32px" type="primary" onClick={getbaseDataList}>
                搜索
              </Button>
            </div>
          </div>
          <Search Inputsearch={Inputsearch} success={handleSelectItem} CancelData={CancelData}></Search>
        </div>
        {/* reight */}
        <RelationList
          relation
          ref={RelationListRef}
          success={relation_item}
          sorterItem={(e: any) => sorter(e, 'baseList')}
          Inputsearch={Inputsearch}
          searchValue={searchValue}
          hasInit={hasInit}></RelationList>
      </div>
      <Modal width="1200px" className="w-100%" title={'关联查询'} open={isModalOpen} onCancel={onCancel} footer={null}>
        <RelationList
          Inputsearch={Inputsearch}
          searchValue={relationsearchValue}
          hasInit={hasInit}
          sorterItem={(e: any) => sorter(e, 'association')}></RelationList>
      </Modal>
    </div>
  )
}
export default memo(Database)
